import {StyleSheet, Text, TouchableOpacity, View, TextInput} from 'react-native'
import React, {useEffect, useState} from 'react'
import PageScrollView from "@/components/PageScrollView";
import PageTabBar from "@/components/PageTabBar";
import FcButton from "@/components/FcButton";
import FcModal from '@/components/FcModal';
import FcTextInput from '@/components/FcTextInput';
import {Toast} from "@ant-design/react-native";
import {useSelector} from "react-redux";

import {
  useGetLanguageListQuery,
  useTranslateMutation
} from "@/store/api/contentManage/contentManageApi";

type Props = {}

const translate = (props: Props) => {
  const [translateContnet, setTranslateContnet] = useState('文案成品')
  const [language, setLanguage] = useState('en')
  const [languageList,setLanguageList] = useState<any>([])
  const [translateContnetOpen, setTranslateContnetOpen] = useState(false)
  const [translateLanguageOpen, setTranslateLanguageOpen] = useState(false)
  const [parentData, setParentData] = useState<any>({})
  const [content, setContent] = useState('')
  const [generateContent, setGenerateContent] = useState('')
  
  const {data:listDataRef,isSuccess:listSuccess,refetch:listRefetch} = useGetLanguageListQuery({})

  const [translateFun] = useTranslateMutation()

  let p = useSelector(state => state.contentManage.rowData)
  
  useEffect(() => {
    setParentData(p)
    setContent(p.content)

    if(listDataRef?.code === 200){
      const list = listDataRef?.result || []
      setLanguageList(list)
    }
  },[listSuccess,listDataRef,p])

  // 开始翻译
  const handleToTranslate = () => {
    Toast.config({ duration: 0})

    let loading = Toast.loading('翻译中')
    let params = {
      fromLanguageCode:'',
      text: parentData.content,
      toLanguageCode: language
    }

    translateFun(params).then(res => {
      if (res.data.code === 200) {
        Toast.remove(loading)
        Toast.config({ duration: 2})
        setGenerateContent(res.data.result)
      }
    })
  }

  return (
    <PageScrollView
      isTransparentTab
      pageTab={
        <PageTabBar
          style={{marginVertical: 10}}
          title={'翻译'}
        />
      }
    >
      <View>
        <View>
          <TouchableOpacity style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}} onPress={() => setTranslateContnetOpen(true)}>
            <Text style={{fontSize: 15}}>{ translateContnet }</Text>
            <Text style={{fontFamily: 'FcIconFont', fontSize: 25, color: 'rgba(0, 0, 0, 0.5)'}}>&#xe647;</Text>
          </TouchableOpacity>

          <FcTextInput
            style={{marginTop: 8}}
            bodyStyle={{backgroundColor: '#FFF'}}
            text={content}
            onChangeText={setContent}
            multiline
            height={300}
          />
        </View>

        <View style={{marginTop: 16}}>
          <View style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
            <TouchableOpacity style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}} onPress={() => setTranslateLanguageOpen(true)}>
              <Text style={{fontSize: 15}}>{ languageList.find((val:any) => val.languageCode == language)?.languageName }</Text>
              <Text style={{fontFamily: 'FcIconFont', fontSize: 25, color: 'rgba(0, 0, 0, 0.5)'}}>&#xe647;</Text>
            </TouchableOpacity>
            <FcButton
              onPress={() => handleToTranslate()}
              type='BjJB'
              colors={['#6989FF', '#C65EFD']}
              style={{width: 120, height: 40}}
              itemStyle={{borderRadius: 8}}
              textName='开始翻译'
              borderWidth={1}
            ></FcButton>
          </View>

          <FcTextInput
            style={{marginTop: 8}}
            bodyStyle={{backgroundColor: '#FFF'}}
            text={generateContent}
            onChangeText={setGenerateContent}
            multiline
            height={300}
          />
        </View>

        {/* 翻译内容弹窗 */}
        <FcModal
          isOpen={translateContnetOpen}
          onFcModalClose={() => setTranslateContnetOpen(false)}
          titleText='更多操作'
          titleBottomBorderWidth={0}
        >
          <View>
            {['标题', '文案成品'].map((item, index) => (
              <TouchableOpacity 
                key={index}
                activeOpacity={1}
                style={styles.translate_contnet_item}
                onPress={() => {setTranslateContnet(item); setContent(item == '标题' ? parentData.title : parentData.content); setTranslateContnetOpen(false)}}
              >
                <Text style={[{fontSize: 17}, translateContnet === item ? {color: '#2856FF'} : null]} numberOfLines={1} ellipsizeMode="tail">{item}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </FcModal>

        {/* 语言列表弹窗 */}
        <FcModal
          isOpen={translateLanguageOpen}
          onFcModalClose={() => setTranslateLanguageOpen(false)}
          titleText='选择翻译语言'
          titleBottomBorderWidth={0}
        >
          <View style={{height: 400}}>
            {languageList.map((item:any, index:any) => (
              <TouchableOpacity 
                key={index}
                activeOpacity={1}
                style={styles.translate_contnet_item}
                onPress={() => {setLanguage(item.languageCode); setTranslateLanguageOpen(false)}}
              >
                <Text style={[{fontSize: 17}, language === item.languageCode ? {color: '#2856FF'} : null]} numberOfLines={1} ellipsizeMode="tail">{item.languageName}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </FcModal>
      </View>
    </PageScrollView>
  )
}

export default translate

const styles = StyleSheet.create({
  translate_contnet_item: {
    marginHorizontal: 16,
    height: 56,
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomColor: 'rgba(0,0,0,0.05)',
    borderBottomWidth: 1,
    fontSize: 17,
    color: 'rgba(0,0,0,0.9)'
  },
  translate_contnet_input: {
    backgroundColor: '#FFF',
    color: 'rgba(0,0,0,0.9)',
    fontSize: 17,
    lineHeight: 26,
    borderRadius: 8,
    marginTop: 10,
    paddingVertical: 8,
    paddingHorizontal: 12,
  }
})